<template>
	<view class="pl10 pr10 d-flex a-center flex-wrap">
		<view class="mb15 width-50 pl5 pr5 boxSizing" v-for="(item,index) in classroomData" :key="index">
			<view class="w100p">
				<view class="content_item p10 boxSizing">
					<view class="itemName d-flex a-center">
						<view class="point mr5"></view>
						<view class="fs14">{{item}}</view>
					</view>
					<view class="d-flex a-center j-sb mt15 mb10">
						<view class="height28p width-45 itemBoxPadding2 mr10 bdr4"
							:class="classroomDataBgColor[classroomDataStatus1[index]]">
							<view class="w100p h100p d-flex a-center j-sb">
								<view class="d-flex-center mr5">
									<image style="width: 40rpx; height: 40rpx;" mode="aspectFill"
										src="/static/img/feature/children/kt.png"></image>
								</view>
								<view class="d-flex a-center fs14">
									<view class="mr5 white">
										{{classroomCount1[index]}}
									</view>
									<view class="unit fs12">A</view>
								</view>
							</view>
						</view>
						<view class="height28p width-45 itemBoxPadding2 bdr4"
							:class="classroomDataBgColor[classroomDataStatus2[index]]">
							<view class="w100p h100p d-flex a-center j-sb">
								<view class="d-flex-center mr5">
									<image style="width: 40rpx; height: 40rpx;" mode="aspectFill"
										src="http://36.138.43.18:8081/upload/269120244927134923.png"></image>
								</view>
								<view class="d-flex a-center fs14">
									<view class="mr5 white">
										{{classroomCount2[index]}}
									</view>
									<view class="unit fs12">A</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		queryTwoListWorkingByAppNum,
		queryTwoListWorkingByAppStatus
	} from "@/api/dormBuilding/oneBuildTwoFloor.js"

	export default {
		data() {
			return {
				timeout: [],

				classroomData: ['1201室', '1202室', '1203室', '1204室', '1205室', '1206室', '1207室', '1208室',
					'1209室', '1210室', '1211室', '1212室', '1213室', '1215室', '1216室', '宿管间'
				],

				classroomCount1: [],
				classroomCount2: [],
				// classroomCount3: [],
				// classroomCount4: [],

				classroomDataStatus1: [],
				classroomDataStatus2: [],
				// classroomDataStatus3: [],
				// classroomDataStatus4: [],

				classroomDataBgColor: ['bgColor_info', 'bgColor_success', 'bgColor_danger', 'bgColor_blue',
					'bgColor_warning', 'bgColor_red', 'bgColor_orange'
				],
				classroomDataBorder: ['border_info', 'border_success', 'border_danger', 'border_blue',
					'border_warning', 'border_red', 'border_orange'
				],
				classroomDataFontColor: ['font_info', 'font_success', 'font_danger', 'font_blue',
					'font_warning', 'font_red', 'font_orange'
				],
			}
		},
		mounted() {
			this.queryTwoListWorkingByAppNum()
			this.queryTwoListWorkingByAppStatus()

			this.setupTimer()
		},
		methods: {
			// 设置定时器
			setupTimer() {
				let _this = this;
				_this.timeout[0] = setInterval(() => {
					_this.queryTwoListWorkingByAppNum()
				}, 15000);
				_this.timeout[1] = setInterval(() => {
					_this.queryTwoListWorkingByAppStatus()
				}, 30000);
			},
			// 清除定时器
			clearTimer() {
				let _this = this;
				if (_this.timeout.length > 0) {
					_this.timeout.forEach(item => {
						clearInterval(item);
					})
				}
			},
			async queryTwoListWorkingByAppNum() {
				await queryTwoListWorkingByAppNum().then(res => {
					let tempData = res.object || []

					let arrData1 = []
					let arrData2 = []
					let arrData3 = []
					let arrData4 = []
					for (var i = 0; i < tempData.length; i++) {
						arrData1.push(tempData[i].deviceShowDetailList[0].deviceValue)
						arrData2.push(tempData[i].deviceShowDetailList[1].deviceValue)
						// arrData3.push(tempData[i].deviceShowDetailList[2].deviceValue)
						// arrData4.push(tempData[i].deviceShowDetailList[3].deviceValue)
					}

					this.classroomCount1 = arrData1
					this.classroomCount2 = arrData2
					// this.classroomCount3 = arrData3
					// this.classroomCount4 = arrData4
				})
			},
			async queryTwoListWorkingByAppStatus() {
				await queryTwoListWorkingByAppStatus().then(res => {
					let tempData = res.object || []

					let arrData1 = []
					let arrData2 = []
					let arrData3 = []
					let arrData4 = []
					for (var i = 0; i < tempData.length; i++) {
						arrData1.push(tempData[i].deviceShowMainList[0].socketColor)
						arrData2.push(tempData[i].deviceShowMainList[1].socketColor)
						// arrData3.push(tempData[i].deviceShowMainList[2].socketColor)
						// arrData4.push(tempData[i].deviceShowMainList[3].socketColor)
					}
					this.classroomDataStatus1 = arrData1
					this.classroomDataStatus2 = arrData2
					// this.classroomDataStatus3 = arrData3
					// this.classroomDataStatus4 = arrData4
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import url("@/static/css/operationData.css");
</style>